<template>
    <header class="head">
        <theme></theme>
        <div class="type">
            <div v-for="(item, index) in options"
                :key="index"
                class="item"
                @click="changeType(index)">
                {{item}}
            </div>
        </div>
    </header>
</template>

<script>
import Theme from '@/components/common/theme/Theme';
import { mapMutations, mapState } from 'vuex';
export default {
    name: 'Head',
    data() {
        return {
            options: ['二维', '三维', '二三维']
        }
    },
    computed: {
        ...mapState('common', ['curType'])
    },
    methods: {
        ...mapMutations('common', ['changeCurType']),
        changeType(index) {
            if (this.curType === index) {
                return;
            }
            this.changeCurType(index);
        }
    },
    components: {
        Theme
    }
}
</script>

<style lang="scss" scoped>
.head {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    @include bg_color();
    .type {
        display: flex;
        align-items: center;
        .item {
            padding: 0 10px;
            border: 1px solid #000;
            margin-left: 10px;
            cursor: pointer;
        }
    }
}
</style>
